<template>
  <div class="number">
    <div class="title">排行榜</div>
    <div class="return">
      <router-link to="/"
        ><img src="./../assets/number/left.png" alt=""
      /></router-link>
    </div>
    <div class="choose">
      <div class="top">
        <li v-on:click="index = 1" :class="{ active: index == 1 }">
          <a href="#classic"></a> 经典模式
        </li>
        <li v-on:click="index = 2" :class="{ active: index == 2 }">
          <a href="#limittime"></a> 限时模式
        </li>
        <li v-on:click="index = 3" :class="{ active: index == 3 }">
          <a href="#arcade"></a> 街机模式
        </li>
        <li v-on:click="index = 4" :class="{ active: index == 4 }">
          <a href="#fast"></a> 极速模式
        </li>
      </div>
      <div class="chooseBox">
        <div class="cover">
          <div class="chooseCon">
            <li id="classic">
              <div class="ctitle">
                <span>经</span>
                <span>典</span>
                <span>模</span>
                <span>式</span>
              </div>
              <div class="nNumber" v-if="myClassNumber != '-'">
                <div class="nbox" v-for="(item,index) in myClassList" v-bind:key = 'index' v-show="index<=4">
                  <img src="./../assets/number/number1.png" alt="" />
                  <div class="nNick">
                    <div class="name" :title="item.user">{{item.user}}</div>
                    <div class="score">{{item.time}}秒</div>
                  </div>
                </div>
                <div class="yours">您的排名是第{{myClassNumber}}名</div>
              </div>
              <no-number v-else></no-number>
            </li>
            <li id="limittime">
              <div class="ctitle">
                <span>限</span>
                <span>时</span>
                <span>模</span>
                <span>式</span>
              </div>
              <div class="nNumber" v-if="myLimitNumber != '-'">
                <div class="nbox" v-for="(item,index) in myLimitList" v-bind:key = 'index' v-show="index<=4">
                  <img src="./../assets/number/number1.png" alt="" />
                  <div class="nNick">
                    <div class="name" :title="item.user">{{item.user}}</div>
                    <div class="score">{{item.score}}分</div>
                  </div>
                </div>
                <div class="yours">您的排名是第{{myLimitNumber}}名</div>
              </div>
              <no-number v-else></no-number>
            </li>
            <li id="arcade">
              <div class="ctitle">
                <span>街</span>
                <span>机</span>
                <span>模</span>
                <span>式</span>
              </div>
              <div class="nNumber" v-if="myArcadeNumber != '-' ">
                <div class="nbox" v-for="(item,index) in myArcadeList" v-bind:key = 'index' v-show="index<=4">
                  <img src="./../assets/number/number1.png" alt="" />
                  <div class="nNick">
                    <div class="name" :title="item.user">{{item.user}}</div>
                    <div class="score">{{item.score}}分</div>
                  </div>
                </div>
                <div class="yours">您的排名是第{{myArcadeNumber}}名</div>
              </div>
              <no-number v-else></no-number>
            </li>
            <li id="fast">
              <div class="ctitle">
                <span>极</span>
                <span>速</span>
                <span>模</span>
                <span>式</span>
              </div>
              <div class="nNumber" v-if="myExtremeNumber != '-'">
                <div class="nbox" v-for="(item,index) in myExtremeList" v-bind:key = 'index' v-show="index<=4">
                  <img src="./../assets/number/number1.png" alt="" />
                  <div class="nNick">
                    <div class="name" :title="item.user">{{item.user}}</div>
                    <div class="score">{{item.score}}分</div>
                  </div>
                </div>
                <div class="yours">您的排名是第{{myExtremeNumber}}名</div>
              </div>
              <no-number v-else></no-number>
            </li>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.number {
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  .title {
    margin: 0px 0px 20px;
    letter-spacing: 10px;
    font-weight: 200;
    font-size: 30px;
  }
  .return {
    position: absolute;
    left: 10px;
    top: 10px;
    img {
      width: 40px;
    }
  }
  .choose {
    .top {
      display: flex;
      width: 70%;
      margin: auto;
      justify-content: space-around;
      flex-wrap: wrap;
      li {
        list-style-type: none;
        color: #000;
        border: 1px solid #000;
        border-radius: 15px;
        padding: 4px 8px;
        margin: 5px;
      }
      .active {
        color: white;
        border: 0px;
        background-color: #000;
      }
    }
    .cover {
      overflow: hidden;
      width: 100%;
      position: relative;
      min-width: 300px;
    }
    .chooseBox {
      .chooseCon {
        width: 400%;
        display: flex;
        transform: translate(0%);
        transition: 1s all;
        justify-content: space-around;
        li {
          list-style-type: none;
          width: 100%;
          margin: 10px 0 30px;
          padding: 0px 3px 10px;
          box-sizing: border-box;
          text-align: center;
          border: 1px solid rgba(0, 0, 0, 0.527);
          border-radius: 10px;
          border-top: 1px solid rgb(235, 235, 235);
          border-left: 1px solid rgb(235, 235, 235);
          .ctitle {
            margin: 20px 0px 0px;
            font-size: 22px;
            font-weight: 200;
            span {
              padding: 5px;
              &:nth-child(1),
              &:nth-child(3) {
                color: white;
                background-color: #000;
                border-radius: 3px;
              }
            }
          }
          .yours {
            font-size: 18px;
            margin: 10px auto;
          }
          .nNumber {
            padding: 20px 10px 0px;
            box-sizing: border-box;

            .nbox {
              line-height: 70px;
              display: flex;
              img {
                width: 50px;
                height: 50px;
                margin: 0 10px;
                display: block;
              }
              .nNick {
                width: 75%;
                font-size: 20px;
                display: flex;
                justify-content: space-between;
                .name {
                  letter-spacing: 4px;
                  color: rgb(215, 168, 124);
                  font-size: 18px;
                  width: 130px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  text-align: left;
                }
                .score {
                  margin-left: 20px;
                }
              }
              &:nth-child(1) > .nNick > .name {
                color: rgb(244, 168, 50);
                font-size: 22px;
              }
              &:nth-child(2) > .nNick > .name {
                color: rgb(221, 221, 221);
                font-size: 22px;
              }
              &:nth-child(3) > .nNick > .name {
                color: rgb(219, 199, 174);
                font-size: 22px;
              }
            }
          }
        }
      }
      .left {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        img {
          width: 50px;
        }
      }
      .right {
        right: 0px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        img {
          width: 50px;
        }
      }
    }
  }
}
</style>

<script>
import noNumber from "./../components/noNumber.vue";
import myArcadeScore from '@/assets/arcadeScore.json';
import myExtremeScore from '@/assets/extremeScore.json';
import myLimitScore from '@/assets/limitScore.json'; 
import myClassicScore from '@/assets/classicScore.json'; 
export default {
  components: {
    noNumber,
  },
  watch: {
    index() {
      document.querySelector(".chooseCon").style.transform = `translate(-${
        (this.index - 1) * 25
      }%)`;
    },
  },
  data() {
    return {
      index: 1,
      islimited: true,
      isarcade: false,
      isclassic: false,
      isfast: false,
      myClassNumber : '',
      myExtremeNumber : '',
      myArcadeNumber : '',
      myLimitNumber : '',
      myClassList : [],
      myExtremeList : [],
      myArcadeList : [],
      myLimitList : [],
      myName : ''
    };
  },
  created(){
    this.myName = localStorage.getItem('myname');
    this.myArcadeList = this.myScoreMethods('myArcadeScore',this.myArcadeList,myArcadeScore,'score');
    this.myArcadeNumber = this.myOrderNumber(this.myArcadeList);
    this.myClassList = this.myScoreMethods('myClassicScore',this.myClassList,myClassicScore,'time');
    this.myClassNumber = this.myOrderNumber(this.myClassList);
    this.myLimitList = this.myScoreMethods('myLimitScore',this.myLimitList,myLimitScore,'score');
    this.myLimitNumber = this.myOrderNumber(this.myLimitList);
    this.myExtremeList = this.myScoreMethods('myExspeedScore',this.myExtremeList,myExtremeScore,'score');
    this.myExtremeNumber = this.myOrderNumber(this.myExtremeList);
    this.logining = localStorage.getItem('logining') != 'false';



    // console.log('街机模式排名数据',this.myArcadeList);
    // console.log('经典模式排名数据',this.myClassList );
    // console.log('限时模式排名数据',this.myLimitList);
    // console.log('极速模式排名数据',this.myExtremeList);
    // console.log('登录状态==>',this.logining);
    // console.log('登录用户==>',this.myName);
  },
  methods:{
    myScoreMethods(localKey,typeList,jsonType,type){
      if(localStorage.getItem(localKey)){
        typeList =  JSON.parse(localStorage.getItem  (localKey));
      }else{
        typeList =  [];
      }
      typeList = jsonType.concat(typeList)
      typeList = this.myOrderScore(typeList,type);
      // console.log(typeList);
      return typeList
    },
     myOrderScore(arr,type){
      let newarr = [];
      if(type == 'time'){
          newarr = arr.sort(function(a,b){
            return a[type] - b[type];
        })
      }else{
        newarr = arr.sort(function(a,b){
          return b[type] - a[type];
        })
      }
      
      return newarr ;
    },
    myOrderNumber(arr){
      if(arr.length > 0){
        for(let i = 0 ; i <arr.length ; i ++ ){
          if(arr[i].user == this.myName){
            return i+1;
          }
        }
      }
      return "-"
    }
  }
};
</script>